<template>
    <div>
        <div class="detail-cont">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/notice-list' }">加入我们</el-breadcrumb-item>
                <el-breadcrumb-item>{{ noticeInfo.cur.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="detail-info">
            <h2>{{ noticeInfo.cur.title }}</h2>
            <div class="time-cont">
                <img src="../../assets/images/icon_yj.png" alt="">
                <i class="views-cont">{{ noticeInfo.cur.views }}</i>
                <img src="../../assets/images/icon_rq.png" alt="">
                <i>{{ noticeInfo.cur.createtime_text }}</i>
            </div>
            <div v-html="noticeInfo.cur.content" class="notice-detail-cont"></div>
            <div class="bg-cont"></div>
            <div class="jump-cont">
                <div @click="handleJump(noticeInfo.pre.id)">
                    <h3 v-if="noticeInfo.pre.id">上一篇文章</h3>
                    <p v-if="noticeInfo.pre.id">Now and Next：{{ noticeInfo.pre.title }}</p>
                    <div v-if="noticeInfo.pre.id">
                        <img src="../../assets/images/icon_yj.png" alt="">
                        <i>{{ noticeInfo.pre.views }}</i>
                    </div>
                </div>
                <div @click="handleJump(noticeInfo.next.id)">
                    <h3 class="right" v-if="noticeInfo.next.id">下一篇文章</h3>
                    <p v-if="noticeInfo.next.id">Now and Next：{{ noticeInfo.next.title }}</p>
                    <div v-if="noticeInfo.next.id">
                        <img src="../../assets/images/icon_yj.png" alt="">
                        <i>{{ noticeInfo.next.views }}</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router'
import { NoticeInfo } from '../../api/notice'
import { ArrowRight } from '@element-plus/icons-vue'
const route = useRoute()
let { id, title } = route.query
const noticeInfo = ref({})
let res = await NoticeInfo(id)
noticeInfo.value = res.data.data

const handleJump = async (id) => {
    let res = await NoticeInfo(id)
    noticeInfo.value = res.data.data

}
</script>

<style lang="scss" scoped>
.detail-cont {
    height: .3125rem;
    background: #FFFFFF;
    padding-left: 1.3542rem;
    display: flex;
    align-items: center;
    margin-bottom: .1979rem;

    span {
        font-size: .0833rem;
        font-weight: 400;
        color: #666666;
    }
}

.detail-info {
    padding: 0rem 2.3958rem 1.5625rem;

    >h2 {
        font-size: .25rem;
        font-weight: 400;
        color: #000000;
        line-height: .3125rem;
        margin-bottom: .1875rem;

    }

    >.time-cont {
        display: flex;
        margin-bottom: .1615rem;

        >img {
            width: .1042rem;
            height: .1042rem;
        }

        >i {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .0677rem;
            font-weight: 400;
            color: #999999;
        }

        >.views-cont {
            margin-right: .0521rem;
        }

    }

    .notice-detail-cont {
        margin-bottom: 1.0417rem;
    }

    .bg-cont {
        height: .0521rem;
        background: #EEEEEE;
        margin-bottom: .1042rem;
    }

    .jump-cont {
        display: flex;
        justify-content: space-between;

        >div {
            flex: 1;

            >h3 {
                font-size: .0938rem;
                font-weight: 300;
                color: #333333;
                cursor: pointer;
                margin-bottom: .2083rem;
            }
            >h3.right{
                text-align: right;
            }
            >p {
                font-size: .0729rem;
                font-weight: 300;
                color: #333333;
                padding-left: .1563rem;
                margin-bottom: .1823rem;
            }

            >div {
                display: flex;

                >img {
                    width: .1042rem;
                    height: .1042rem;
                    vertical-align: middle;
                    margin-right: .0208rem;
                }

                >i {
                    font-size: .0677rem;
                    font-weight: 400;
                    color: #999999;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}
</style>
<style>
.notice-detail-cont>p {
    font-size: .0938rem;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: #333333;
    line-height: .1667rem;
}
</style>